import type { ExtractPropTypes, PropType } from 'vue'
import {
    baseProps,
    makeBooleanProp,
    makeStringProp,
    numericProp,
} from '../common/props'
import type { BadgeProps, BadgeType } from '../wd-badge/types'

export type LinkType = 'navigateTo' | 'switchTab' | 'reLaunch' | 'redirectTo'

export const gridItemProps = {
    ...baseProps,
    /**
     * GridItem 下方文字样式
     */
    customText: makeStringProp(''),
    /**
     * GridItem 上方 icon 样式
     */
    customIcon: makeStringProp(''),
    /**
     * 图标名称，可选值见 wd-icon 组件
     */
    icon: makeStringProp(''),
    /**
     * 图标大小
     */
    iconSize: makeStringProp('26px'),
    /**
     * 文字
     */
    text: String,
    /**
     * 点击后跳转的链接地址
     */
    url: String,
    /**
     * 页面跳转方式, 参考微信小程序路由文档，可选值：navigateTo / switchTab / reLaunch
     */
    linkType: makeStringProp<LinkType>('navigateTo'),
    /**
     * 是否开启 GridItem 内容插槽
     */
    useSlot: makeBooleanProp(false),
    /**
     * 是否开启 GridItem icon 插槽
     */
    useIconSlot: makeBooleanProp(false),
    /**
     * 是否开启 GridItem text 内容插槽
     */
    useTextSlot: makeBooleanProp(false),
    /**
     * 是否显示图标右上角小红点
     */
    isDot: {
        type: Boolean,
        default: undefined,
    },
    /**
     * 图标右上角显示的 badge 类型，可选值：primary / success / warning / danger / info
     */
    type: String as PropType<BadgeType>,
    /**
     * 图标右上角 badge 显示值
     */
    value: numericProp,
    /**
     * 图标右上角 badge 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
     */
    max: Number,
    /**
     * 徽标属性，透传给 Badge 组件
     */
    badgeProps: Object as PropType<Partial<BadgeProps>>,
}

export type GridItemProps = ExtractPropTypes<typeof gridItemProps>
